<template>
  <div style="display: inline-block;">
    <span class="title">花百科管理</span>
    <el-menu class="el-menu" default-active='search' mode="horizontal" :ellipsis="false">
      <el-menu-item index="search" @click="handleMenuSelect($event)"><span
          style="font-size:1.5em;">查询</span></el-menu-item>
      <el-menu-item index="insert" @click="handleMenuSelect($event)"><span
          style="font-size:1.5em;">添加</span></el-menu-item>
    </el-menu>
    <div class="searchBox" v-show="isSearch">
      <div class="searchInputBox" v-show="!edit">
        <el-collapse @change="handleSearchInputChange($event.length)">
          <el-collapse-item>
            <template #title class="collapseHeader">
              <el-icon :size="30" :color="this.isQuery ? '#409EFC' : '#130c0e'">
                <Search />
              </el-icon>
              <el-text size="large" :type="this.isQuery ? 'primary' : null">筛选</el-text>
            </template>
            <flowerKnowledgeSearch ref="queryComponent" @queryEvent="handleQueryEvent" />
          </el-collapse-item>
        </el-collapse>
      </div>
      <div>
        <flowerKnowledgeListTable ref="tableRef" v-show="!edit" @toEdit="handleToEdit" />
      </div>
      <div>
        <PageButton v-show="!edit" :total="pages" @pageChange="handleCurrentPageChange" ref="pageButton" />
      </div>
      <div class="editBox">
        <flowerKnowledgeChange ref="editTable" @quitEdit="handleQuitEdit" @updateSuccess="handleUpdateSuccess"
          v-show="edit" />
      </div>
    </div>
    <div class="insertBox" v-show="!isSearch">
      <flowerKnowledgeInsert ref="insertTable" @insertSuccess="handleInsertSuccess" />
    </div>
    <el-backtop :right="100" :bottom="100" />
  </div>
</template>
<script>
import flowerKnowledgeListTable from "@/components/backend/flowerKnowledge/components/flowerKnowledgeListTable.vue";
import PageButton from "@/components/backend/PageButton/PageButton.vue";
import flowerKnowledgeChange from "@/components/backend/flowerKnowledge/components/flowerKnowledgeChange.vue";
import flowerKnowledgeSearch from "@/components/backend/flowerKnowledge/components/flowerKnowledgeSearch.vue";
import flowerKnowledgeInsert from "@/components/backend/flowerKnowledge/components/flowerKnowledgeInsert.vue";
export default {
  name: "flowerKnowledgeManager",
  components: {
    flowerKnowledgeListTable,
    PageButton,
    flowerKnowledgeChange,
    flowerKnowledgeSearch,
    flowerKnowledgeInsert,
  },
  data() {
    return {
      pages: Number(10),
      edit: false,
      currentPage: 1,
      pageSize: 10,
      isSearch: true, //判断菜单显示在哪一页
      isQuery: false, //启动模糊查询
      queryForm: null,
    };
  },
  methods: {
    handleCurrentPageChange(currentPage) {
      // 父组件处理currentPage变化的逻辑
      this.currentPage = currentPage;
      this.$nextTick(() => {
        this.$refs.tableRef.queryFlowerList(this.pageSize, currentPage, this.queryForm).then(() => {
          this.pages = this.$refs.tableRef.getPages();
          this.$refs.pageButton.setPageCount(this.pages);
          this.$refs.pageButton.setCurrentPage(this.currentPage);
        });
      });
    },

    //处理toEdit消息
    handleToEdit(id) {
      this.edit = true;
      this.$refs.editTable.showFlowerKnowledge(id);
    },

    //处理quitEdit消息
    handleQuitEdit() {
      this.edit = false;
    },

    //处理更新成功消息
    handleUpdateSuccess() {
      this.edit = false;
      this.handleCurrentPageChange(this.currentPage);
    },

    //处理插入成功消息
    handleInsertSuccess() {
      this.handleCurrentPageChange(this.currentPage);
    },

    //处理菜单列表点击事件
    handleMenuSelect(event) {
      switch (event.index) {
        case "search":
          this.isSearch = true;
          break;
        case "insert":
          this.isSearch = false;
          break;
      }
    },

    //处理模糊查找下拉框
    handleSearchInputChange(length) {
      switch (length) {
        case 1:
          //console.log("面板展开");
          this.isQuery = true;

          break;
        case 0:
          //console.log("面板关闭");
          this.isQuery = false;
          //把表单清空
          this.queryForm = {}
          break;
      }
    },

    //处理模糊查找事件
    handleQueryEvent(form) {
      this.queryForm = form;
      this.handleCurrentPageChange(1);
    }
  },
  mounted: function () {
    this.$refs.tableRef.queryFlowerList(this.pageSize, 1).then(() => {
      this.pages = this.$refs.tableRef.getPages();
      this.$refs.pageButton.setPageCount(this.pages);
    });
  },
};
</script>

<style scoped>
.title {
  font-size: 30px;
  font-weight: bolder;
}

.el-menu {
  margin-top: 20px;
}

.editBox {
  margin-top: 30px;
}

.insertBox {
  margin-top: 30px;
}
</style>